<template>
	<view :style="[AppSkinVar]">
		<view class="tab e-flex-xy-center bg-white">
			<view class="text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 0" :class="{ 'tab-active': tabIndex == 0 }">
				{{ $t('common.全部') }}
			</view>
			<view class="text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 1" :class="{ 'tab-active': tabIndex == 1 }">
				{{ $t('order.待付款') }}
			</view>
			<view class="text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 2" :class="{ 'tab-active': tabIndex == 2 }">
				{{ $t('yuncang.已付款') }}
			</view>
		</view>
		<swiper class="swiper" :current="tabIndex" @change="(e) => (tabIndex = e.detail.current)">
			<swiper-item v-for="(item, index) in orderList" :key="index">
				<scroll-view scroll-y @scrolltolower="item.handleQueryPage()" lower-threshold="60">
					
					<view class="e-m-t-20" v-for="order in item.list" :key="order.id" @tap="$goTo('/pages/yuncang/order/details/index', { id: order.id })">
						<yuncangGoodsCard
							:priceShow="true"
							:goods="order"
							:stock="order.qty"
							:goodsKeys="{
								image: 'commodityPhoto',
								price: 'commodityPrice',
								name: 'commodityName',
								qty: 'commodityQty'
							}"
						></yuncangGoodsCard>
						<view class="bg-white">
							<view class="text-right e-p-30 fw-600 shadow-f3">{{ $t('order.实付') }}{{ $unitEn }}{{ order.commodityPrice }}</view>
							<order-button class="shadow-f3" :info="order" :isDetail="false" v-if="order.receivingStatus !== 4"></order-button>
						</view>
					</view>
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="item.isEmpty"></empty>
					<load-more v-else :showLoad="item.showLoad"></load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
import { ref,reactive  } from 'vue';
import { getDicts, getYuncangOrderList } from '@/common/request/api';
import { useQueryPage, useCurrentInstance } from '@/common/hooks';
import orderButton from './child/order-button.vue';
import yuncangGoodsCard from '../child/yuncang-goods-card.vue';
import { onShow } from '@dcloudio/uni-app';

const tabIndex = ref(0);
const goodsKeys = {
	image: 'commodityUrl',
	skuName: 'commoditySpecName',
	price: 'deputyMoney',
	name: 'commodityName',
	qry: 'commodityCount'
};


const loading = ref(true);

const orderList = reactive([
	useQueryPage({
		api: getYuncangOrderList
	}),
	useQueryPage({
		api: getYuncangOrderList,
		option: {
			params: {
				state: 0
			}
		}
	}),
	useQueryPage({
		api: getYuncangOrderList,
		option: {
			params: {
				state: 1
			}
		}
	})
]);
onShow(() => {
	orderList[0].handleRefresh();
	orderList[1].handleRefresh();
	orderList[2].handleRefresh();
})


</script>

<style lang="scss" scoped>
.shadow-f3 {
	box-shadow: 0px -2rpx 0px 0px #f3f3f3;
}
.tab {
	> view {
		height: 90rpx;
		line-height: 90rpx;
	}
	.tab-active {
		&::before {
			content: '';
			position: absolute;
			width: 46rpx;
			height: 6rpx;
			background: var(--color-primary);
			border-radius: 3rpx;
			bottom: 0;
			left: calc(50% - 23rpx);
		}
	}
}

.swiper {
	height: calc(100vh - 90rpx);
	scroll-view {
		height: 100%;
	}
}
</style>
